<template>


	<div class="animate__animated animate__zoomIn">

		<div style="height: 100px">
			<el-image :src="require('@/assets/blog1.png')" style="height: 100px"></el-image>
		</div>

		<el-row type="flex" class="row-bg" justify="center" style="height: 600px;background-color: #489BF2" >


			<el-col :xl="6" :lg="7">

<!--				<el-image :src="require('@/assets/blog.png')"></el-image>-->
				<h2>欢迎来到留言管理系统</h2>

				<el-carousel :interval="4000" type="card" height="200px">
					<el-carousel-item v-for="item in imagesList" :key="item">
						<el-image
								style="width: 225px; height: 200px"
								:src="item"
								:preview-src-list="imagesList">
						</el-image>
					</el-carousel-item>
				</el-carousel>
				<!--			<el-image :src="require('@/assets/logo.png')" style="height: 180px; width: 180px;"></el-image>-->

				<p>相恨不如潮有信，相思始觉海非深。</p>
				<p>--浪淘沙·借问江潮与海水</p>

			</el-col>

			<el-col :span="1">
				<el-divider direction="vertical"></el-divider>
			</el-col>
			<el-col :xl="6" :lg="7">
				<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="80px">
					<el-form-item label="用户名" prop="username" style="width: 380px;font-weight:bold">
						<el-input v-model="loginForm.username"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password"  style="width: 380px;font-weight:bold">
						<el-input v-model="loginForm.password" type="password"></el-input>
					</el-form-item>
					<el-form-item label="验证码" prop="code"  style="width: 380px;font-weight:bold">
						<el-input v-model="loginForm.code"  style="width: 172px; float: left" maxlength="5"></el-input>
						<el-image :src="captchaImg" class="captchaImg" @click="getCaptcha"></el-image>
					</el-form-item>

					<el-form-item class="style">
						<a href="/register" type="primary">还没有帐号？立即注册</a>
						<el-button  style="font-weight:bold" @click="submitForm('loginForm')">登录</el-button>
						<el-button style="font-weight:bold" @click="resetForm('loginForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col :xl="2" :lg="3">
				<el-card >
<!--					<p>管理员账号: vue123456 密码123456</p>-->
					<p>普通账号: ly 密码123456</p>
				</el-card>
			</el-col>

		</el-row>

		<div>
			<span style="margin-left: 550px">版权所有 ©2022 保留所有权利 2200139946 高武强</span>
		</div>
	</div>

</template>

<script>

	import qs from 'qs'

	export default {
		name: "Login",
		data() {
			return {
				dialogVisible: false,
				loginForm: {
					// username: 'admin',
					// password: '111111',
					username: 'vue123456',
					password: '123456',
					code: '',
					token: '',
					show2: true
				},
				imagesList:[
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fseopic.699pic.com%2Fphoto%2F40029%2F4676.jpg_wh1200.jpg&refer=http%3A%2F%2Fseopic.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672242205&t=ed881f76418c8913e3daf749f4e7dce2',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftalkimages.cn%2Fimages%2Fmedium%2F20133001%2Ftkf001_132483.jpg&refer=http%3A%2F%2Ftalkimages.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672242299&t=c06d9360ddca577a2dc8766b356b9617',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fjocat.cn%2F2018%2F10%2F1-375.jpg%3F%3Dde96d9871539513480&refer=http%3A%2F%2Fjocat.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672242360&t=0039123d092f3200b0a897a070623ffe'
					],
				rules: {
					username: [
						{ required: true, message: '请输入用户名', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' }
					],
					code: [
						{ required: true, message: '请输入验证码', trigger: 'blur' },
						{ min: 5, max: 5, message: '长度为 5 个字符', trigger: 'blur' }
					],
				},
				captchaImg: null
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post('/login?'+ qs.stringify(this.loginForm)).then(res => {

							console.log(res)
							const jwt = res.headers['authorization']

							this.$store.commit('SET_TOKEN', jwt)
							this.$router.push("/index")
						})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			getCaptcha() {
				this.$axios.get('/captcha').then(res => {

					console.log("/captcha")
					console.log(res)

					this.loginForm.token = res.data.data.token
					this.captchaImg = res.data.data.captchaImg
					this.loginForm.code = ''
				})
			}
		},
		created() {
			this.getCaptcha()
		}
	}
</script>

<style scoped>

	.el-row {
		background-color: #fafafa;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.el-divider {
		height: 200px;
	}

	a{ padding:0 10px;}

	.captchaImg {
		float: left;
		margin-left: 8px;
		border-radius: 4px;
	}

	.style{
		margin-left: 8px;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

</style>
